<template>
    <div class="image-container">
      <div class="image-wrapper left">
        <img src="@/assets/pic/Home_2.jpg" alt="Home 2" class="image" />
      </div>
      <div class="divider"></div>
      <div class="image-wrapper right">
        <img src="@/assets/pic/Home_1.png" alt="Home 1" class="image" />
      </div>
    </div>
  </template>
  
  <script setup>
  </script>
  
  <style scoped>
  .image-container {
    display: flex;
    align-items: center; /* 垂直居中 */
    width: 100%; /* 设置为全宽 */
  }
  
  .image-wrapper {
    flex: 1; /* 各占一半宽度 */
    position: relative; /* 用于相对定位 */
    overflow: hidden; /* 隐藏溢出的部分 */
  }
  
  .image {
    width: 100%; /* 使图片填满父容器 */
    height: auto; /* 保持纵横比 */
    transition: transform 0.3s ease; /* 添加过渡效果 */
  }
  
  .image-wrapper:hover .image {
    transform: scale(1.1); /* 悬浮时放大 */
  }
  
  .divider {
    width: 2px; /* 分隔线宽度 */
    height: 100%; /* 高度与图片相同 */
    background: black; /* 分隔线颜色 */
    border-left: 2px dashed black; /* 虚线效果 */
  }
  </style>
  